<template>
  <div style="">
    <Header :left="true" leftText="返回" title="手工加严填报" />
    <div style="background-color:white;">
      <!-- 未关闭的加严管控 -->
      <div style="font-size: 15px">
        <van-row style="margin-top: 20px">
          <van-col>
            <div style="margin-top: 5px; ">
              <van-button style="width: 8rem; margin-left: 3px;margin-right: 3px;" type="primary" class="buttongroup1"
                @click="addMessage" color="#138087">新增</van-button>
            </div>
          </van-col>
          <van-col class="message" style="float: right;padding-top: 13px;padding-right: 15px;">
            实时加严状态
          </van-col>
        </van-row>

        <div>
          <div v-for="(item, index) in itemsOne" :key="item.Id" style="position: relative">
            <div style="width: 100%; background-color: white; height: 5px">
              <span></span>
            </div>
            <div class="divStyle" style="background-color: white;">
              <van-row style="margin-left: 10px; margin-top: 10px" v-show="false">
                <van-col span="6"><b>id:</b></van-col>
                <van-col span="14">{{ item.Id }}</van-col>
              </van-row>
              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>序号:</b></van-col>
                <van-col span="14">{{ index + 1 }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>生产线:</b></van-col>
                <van-col span="6">{{ item.PLineID }}</van-col>
                <van-col span="6"><b>建议等级:</b></van-col>
                <van-col span="6">{{
                  showABCTypeName(item.ABCType)
                }}</van-col>
              </van-row>
              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>加严类型:</b></van-col>
                <van-col span="14">{{
                  showAddStrictTypeName(item.StrictTypeID)
                }}</van-col>
                <!-- <van-col span="2" v-if="item.ABCType == '4'&& item.Closed==false">
                    <van-button
                      color="#138087"
                      @click.stop="updateMessage(item)"
                      style="
                        width: 85px;
                        height: 40px;
                        font-size: 12px;
                        position: absolute;
                        left: 80%;
                      "
                      type="primary"
                      text="更改"
                    />
                  </van-col> -->
                <van-col span="2">
                  <van-button color="#138087" @click.stop="queryMessage(item)" style="
                        width: 85px;
                        height: 40px;
                        font-size: 12px;
                        position: absolute;
                        left: 80%;
                      " type="primary" text="查看详情" />
                </van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>生产订单:</b></van-col>
                <van-col span="14">{{
                  showPOrderIDName(item.POrderID)
                }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>加严说明:</b></van-col>
                <van-col span="14">{{ item.StrictDescription }}</van-col>
              </van-row>

              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>加严开始时间:</b></van-col>
                <van-col span="14">{{ item.FromDatetime }}</van-col>
              </van-row>
              <van-row style="margin-left: 10px; margin-top: 10px">
                <van-col span="6"><b>创建者:</b></van-col>
                <van-col span="14">{{ item.Creator }}</van-col>
              </van-row>
              <van-row style="
                    margin-left: 10px;
                    margin-top: 10px;
                    border-bottom: 2px solid rgba(82, 76, 76, 0.39);
                  ">
                <van-col span="6"> </van-col>
                <van-col span="3"> </van-col>
                <van-col span="6"> </van-col>
              </van-row>
            </div>
          </div>
        </div>
      </div>
      <!-- 已关闭的加严管控 -->
    </div>
  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  tab,
  tabs,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient as _httpClientApi } from "@/libs/api";
import { _httpClient } from "@/libs/apisie";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Form);
Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(tabs);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);
Vue.use(tab);

export default {
  name: "queryTightfill",
  components: {
    tab,
    tabs,
    Form,
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },

  data() {
    return {
      columnsPOrderID: [],
      columnsPLineID: [],
      columnsStrictTypeID: [
        { StrictTypeID: "SM01", StrictTypeName: "关键工艺参数异常加严" },
        { StrictTypeID: "SM02", StrictTypeName: "机器设备异常加严" },
        { StrictTypeID: "SM03", StrictTypeName: "质量异常加严" },
        { StrictTypeID: "SM04", StrictTypeName: "生产条件异常加严" },
      ],
      columnsABCType: [
        { ABCType: "1", ABCTypeName: "甲" },
        { ABCType: "2", ABCTypeName: "乙" },
        { ABCType: "3", ABCTypeName: "丙" },
        { ABCType: "4", ABCTypeName: "-未确定" },
      ],
      itemsOne: [],
      itemsTwo: [],
      query: {
        ReqDescription: "",
        RequestMan: "",
      },
    };
  },
  created: function () {
    this.getUncheckedList();
    this.getPline();
    this.getPOrderID();
  },
  async mounted() { },
  methods: {
    async getPOrderID() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/ProductionOrder/GetList"
        );
        if (res.HttpCode === "200") {
          let teamMap = res.Data.map((item) => ({
            POrderID: item.POrderID,
            MaterialName: item.MaterialName,
            MaterialID: item.MaterialID,
            POrderIDAndMaterialName: item.POrderID + " " + item.MaterialName,
          }));
          _this.columnsPOrderID = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    showPOrderIDName(POrderID) {
      var POrderIDName = POrderID;
      this.columnsPOrderID.forEach((item) => {
        if (item.POrderID === POrderID) {
          POrderIDName = item.POrderIDAndMaterialName;
        }
      });
      return POrderIDName;
    },
    showABCTypeName(ABCType) {
      var ABCTypeName = ABCType;
      this.columnsABCType.forEach((item) => {
        if (item.ABCType === ABCType) {
          ABCTypeName = item.ABCTypeName;
        }
      });
      return ABCTypeName;
    },
    showPLineIDName(PLineID) {
      var PLineName = PLineID;
      this.columnsPLineID.forEach((item) => {
        if (item.PLineID === PLineID) {
          PLineName = item.PLineName;
        }
      });
      return PLineName;
    },
    showAddStrictTypeName(AddStrictType) {
      var AddStrictTypeName = AddStrictType;
      this.columnsStrictTypeID.forEach((item) => {
        if (item.StrictTypeID === AddStrictType) {
          AddStrictTypeName = item.StrictTypeName;
        }
      });
      return AddStrictTypeName;
    },
    tabChange(name, title) {
      if (name == 0) {
        //查询未确认信息
        this.getUncheckedList();
      } else if (name == 1) {
        //查询已确认信息
        this.getCheckedList();
      }
    },
    //获取生产线
    async getPline() {
      let _this = this;
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/PLineEquipment/GetList?FactoryID=TC00"
        );
        if (res.HttpCode === "200") {
          let teamMap = res.Data.map((item) => ({
            PLineID: item.PLineID,
            PLineName: item.PLineName,
          }));
          _this.columnsPLineID = teamMap;
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //跳转新增页面
    async addMessage() {
      api.openWin({
        name: "tightfill",
        url: "./tightenup-tightfill.html",
        pageParam: {
          itemQuery: {
            showButton: true,
            isOpen: true,
          },
        },
        reload: true,
      });
      setTimeout(function () {
        _this.$ac.closeWin();
      }, 2000);
    },
    //跳转修改页面
    async updateMessage(item) {
      item.valuePLineID = this.showPLineIDName(item.PLineID);
      item.valueAddStrictType = this.showAddStrictTypeName(item.StrictTypeID);
      item.valuepPOrderID = this.showPOrderIDName(item.POrderID);
      item.showButton = true;
      item.isOpen = false;
      api.openWin({
        name: "tightfill",
        url: "./tightenup-tightfill.html",
        pageParam: {
          itemQuery: item,
        },
        reload: true,
      });
      setTimeout(function () {
        _this.$ac.closeWin();
      }, 2000);
    },
    //跳转详情页面
    async queryMessage(item) {
      api.openWin({
        name: "showActivedTightfill",
        url: "./tightenup-showActivedTightfill.html",
        pageParam: {
          item: item.Id,
        },
        reload: true,
      });
      setTimeout(function () {
        _this.$ac.closeWin();
      }, 2000);
    },
    //查询未确认加严管控信息
    async getUncheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/AddStrictManage/GetList?Actived=true&Closed=false&NoDoOnTime=false"
        );
        Toast.clear();

        _this.itemsOne = res.Data;
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    //查询已确认加严管控信息
    async getCheckedList() {
      let _this = this;
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "Loading...",
      });
      try {
        let res = await _httpClient.get(
          _httpClient.getApiPrefix() + "/AddStrictManage/GetPageList?Closed=true&PageSize=100&PageIndex=1"
        );
        Toast.clear();

        let list = []
        for (let i = 0; i < res.Data.length; i++) {
          let item = res.Data[i]

          if (item.ApprenStrictFlag == true) {
            list.push(item)
          }


        }

        _this.itemsTwo = list;
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
  },
};
</script>

<style>
.message {
  font-size: 20px;
  margin-top: 10px;
  margin-left: -10px;
  font-weight: bold;
}

.textScroll {
  display: inline-block;
  position: fixed;
  top: 24%;
  bottom: 1px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 0.5rem;
  z-index: 1;
}

.textScroll2 {
  display: inline-block;
  position: fixed;
  top: 15%;
  bottom: 1px;
  overflow: scroll;
  right: 0;
  width: 100%;
  margin-bottom: 0.5rem;
  z-index: 1;
}

.buttongroup1 {
  float: left;
  width: 30%;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
